<template>
  <el-dialog :close-on-click-modal="false" title="选择考评项" width="900px" :visible.sync="visible">
    <div>
      <el-select
        filterable
        v-model="selectValue"
        @change="handleChange"
        clearable
        class="mb20 mr20"
        style="width: 40%"
      >
        <el-option
          v-for="(item,index) in selectData"
          :key="index"
          :label="item.evalTypeName"
          :value="item.evalTypeId"
        />
      </el-select>
      <el-tooltip
        class="item"
        effect="light"
        content="下拉选择类型后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
        placement="top"
      >
        <i class="fs16 el-icon-warning-outline"></i>
      </el-tooltip>
      <x-transfer
        @postData="handlePostData"
        :titles="['待选考评项目', '已选考评项目']"
        :from="fromData"
        :to="toData"
        class="mt20"
        ref="xTransfer"
      />
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleOk">新增</el-button>
    </div>
  </el-dialog>
</template>

<script>
import XTransfer from '@/components/XTransfer'
import { getEvalParent, evalItemGet } from '@/api/eval'

export default {
  components: {
    XTransfer
  },
  mounted() {
    getEvalParent().then(res => {
      this.selectData = res.data
    })
  },
  data() {
    return {
      visible: false,
      selectValue: null,
      selectData: [],
      fromData: [],
      toData: []
    }
  },
  methods: {
    show(arr) {
      this.visible = true
      arr.map(v => {
        v.key = v.evalItemId
        v.label = v.evalItemName
      })
      this.toData = [...arr]
    },
    handleOk() {
      this.$refs.xTransfer.postToData()
      if (this.toData.length > 0) {
        this.$emit('chooseEval', this.toData)
      }
      this.visible = false
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      console.log('arr', arr)
      this.toData = [...new Set([...arr])]
      console.log('toData', this.toData)
    },
    // 下拉框切换 fromData 数据
    async handleChange(val) {
      if (val) {
        const res = await evalItemGet(val)
        let arr = res.data
        arr.map(v => {
          v.key = v.evalItemId
          v.label = v.evalItemName
        })

        this.$nextTick(() => {
          this.fromData = [...arr]
          this.saveArr = [...arr]
        })
      } else {
        this.fromData = []
        this.saveArr = []
      }
    }
  }
}
</script>
